<template>
<el-container>
  <el-header>
    <el-row>
      <el-col id="page1Tag" :span="8" @click="$router.push('/')"><span>处理表单</span></el-col>
      <el-col id="page2Tag" :span="8" @click="$router.push('/2')"><span>表单预览</span></el-col>
      <el-col id="page3Tag" :span="8" @click="$router.push('/3')"><span>查看流程</span></el-col>
    </el-row>
    <div style="
      content: ' ';
      position: relative;
      left: 0;
      top: 0;
      height: 0;
      width: 100%;
      border-top: 1px solid #bcbab6;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
      "></div>
  </el-header>
  <el-main id="el-main">
    <img class="p3P" @click="onClickP3P" src="../public/photo4.jpg"/>
    <img class="p3P" src="../public/photo5.jpg"/>
    <div id="dialog">
      <table id="dialogHeader">
        <tr>
          <td><div>院系领导</div></td>
          <td style="text-align: right;"><img id="dialogClose" src="../public/p3DialogClose.png" onclick='document.getElementById("dialog").style.display="none"'/>
          </td>
        </tr>
        </table>
        <table style="width:100%;">
          <tr style="
            height: 152px;
            padding: 5px!important;
          ">
            <p style="
              margin: 12px 0;
              position: relative;
              top: 5px;
              font-weight: bold;
              left: 5px;
              border-left: 3px solid red;
              font-size: 12px;
              font-weight: bold;
              line-height: 12px;
              color: red;
              padding-left: 6px;
              text-align: left;
            ">办理人员</p>
            <div style="
              float: left;
              padding-left: 8px;
              position: relative;
              top: 3px;
            ">
              <img src="../public/p3Human.png" style="
                margin: 0 7px 0 1px;
                position: relative;
                top: 4px;
              "/>
              <span style="
                font-size: 9pt;
              ">王宇晗</span>
              <img src="../public/p3OK.png" style="
                vertical-align:middle;
                margin-left:5px;
                top: 1px;
              ">
            </div>
          </tr>
          <tr id="dialogFooter">
            <div style="line-height: 25px; width:100%;">任意一人处理后节点结束</div>
          </tr>
        </table>
    </div>
  </el-main>
</el-container>
</template>

<script>
export default({
  setup() {
    document.title= "查看流程";
  },
  methods: {
    onClickP3P(event){
      document.getElementById("dialog").style.display="block";
      console.log(event.clientX);
      console.log(event.clientY);
      document.getElementById("dialog").style.top= event.clientY+'px';
      document.getElementById("dialog").style.left= event.clientX+'px';
      }
    }
})
</script>

<style scoped>
#dialogFooter{
  width:100%;
  height: 25px;
  display:inline-block;
      text-align: center;
    cursor: pointer;
    border-top: solid 1px #C9C9C9;
    padding: 0px;
    font-size: 9pt;
    background-color: #fffa86;
    border-radius:0 0 5px 5px ;
}
#dialogClose{
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  top: 5px;
}
table{
  border-spacing: 0px;
}
td{
  padding: 0px;
}
#dialogHeader{
  width: 100%;
    padding: 0 15px;
    line-height: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #FFF;
    background-color: #2487c8;
      border-radius: 5px 5px 0 0;
      text-align: left;

}
#dialog{
  padding: 0px;
  border-radius: 5px;
  margin: 0;
  width: 175px;
  height: 218px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 22%);
  border: none !important;
  background-color: white;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  position: sticky;
  display: none;
}


body{
  background-color: #eee;
}
#page3Tag {
  color: rgb(66, 170, 222);
  border-bottom: 3px solid #2FA1DB;
}
.el-header{
  position:fixed;
  width: 100%;
  background-color: #ffffff;
  color: #888;
  text-align: center;
  height: 53px!important;
  line-height: 48px;
  padding: 0px!important;
  font-size: 0.398cm;
  z-index: 1;
}
#el-main{
  background-color: #eee;
  min-height: 100vh;
}
.p3P{
  position: relative;
  width: 100vw;
  top:calc(100vh / 4);
}
</style>


